<style scoped lang="less">
  .help-container {
    background-color: white;
    padding: 2vh 5vw;
  }

  .help-amout {
    color: @--price;
    font-size: 0.5rem;
  }

  .symbol {
    font-size: 0.3rem;
  }

  .help-user-info {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .help-img {
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    margin-right: 1vw;
  }

  .help-item {
    margin-top: 1vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  span.help-nickname {
    font-size: 0.3rem;
    color: @--gray;
  }

  .help-title {
    font-size: 0.45rem;
    font-weight: bold;
    color: @--title-text;
    padding: 2vh 0;
  }

  .load-more {
    padding: 5vw;
    font-size: 0.4rem;
    color: @--gray;
  }
</style>
<template>
  <div class="help-container" v-if="helpList!==null">
    <div class="help-title">助攻好友</div>
    <div class="item-wrap">
      <div class="help-item" v-for="(item,index) in helpList" :key="index">
        <div class="help-user-info">
          <img class="help-img" :src="item.head_img"/>
          <span class="help-nickname">
          {{item.nickname}}
        </span>
        </div>
        <div class="help-amout"><span class="symbol">￥</span>{{item.amount/100}}</div>
      </div>
    </div>
    <div class="load-more" @click="getHelp">{{this.finished?'到底了':'加载更多'}}</div>
  </div>
</template>
<script>
  import {getHelp} from "@/api/kanjia";

  export default {
    name: 'kanjia-help',
    props: {
      kanjia_data: {type: Object, default: null}//微信用户信息
    },
    watch: {
      'kanjia_data': {
        handler(n, o) {
          this.getHelp();
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        finished: false,
        helpList: []
      };
    },
    methods: {
      getHelp() {
        if (this.finished) {
          return;
        }
        let page = this.helpList.length / 20 + 1;
        getHelp({kanjia_order_id: this.kanjia_data.id, size: 20, page: page}).then(rep => {
          this.helpList = this.helpList.concat(rep.data.data.list);
          if (this.helpList.length === rep.data.data.count) {
            this.finished = true;
          }
        })
      }
    }
  }
</script>